<template>
  <div>
    <div class="bread_crumb">
      <bread-crumb></bread-crumb>
    </div>
    <div class="stu_info_wrap">
        <div class="stu_info">
            <h1 class="stu_info_title">学生信息录入</h1>
            <el-form ref="form" :model="form" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="学号" prop="stu_id">
                    <el-input v-model.trim="form.stu_id"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名">
                    <el-input v-model.trim="form.stu_name"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                      <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                      <el-radio v-model="form.stu_sex" label="女">女</el-radio>
                  </el-form-item>
                  <el-form-item label="籍贯">
                    <el-cascader v-model="value" :options="options" :props="{ label:'name', value: 'name',}" @change="handleChange"></el-cascader>
                  </el-form-item>
                  <el-form-item label="日期">
                    <el-date-picker v-model="form.stu_date" type="date" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="男女朋友">
                    <el-input v-model.trim="form.stu_gbf"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="头像">
                    <div>
                      <el-button @click="upLoad">点击上传图片</el-button>
                      <el-button @click="goCamera">拍照上传</el-button>
                    </div>
                    <input type="file" @change="getFile" ref="getInp" hidden name="" id="">
                    <div>
                      <img width="150px" height="150px" :src="form.stu_head_img" alt="" srcset="">
                    </div>
                    <div>
                      <p>注：将其转为base64字符串上传，图片大小为1M左右，否则不能上传</p>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
                  <el-form-item label="爱好及自我评价">
                    <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editor"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                    />
                    <div class="wangEditWrap" style="height: 200px; overflow: hidden">
                      <Editor
                        style="height: 500px; overflow-y: hidden"
                        v-model="html"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        @onCreated="onCreated"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" :plain="true" @click="onSubmit"
                        >提交</el-button
                    > 
                    <el-button type="primary" @click="goReset">重置</el-button>
                    <el-button type="primary" @click="$router.push({ name: 'testResetComponent'})">go testResetComponent </el-button>
                  </el-form-item>
            </el-form>
        </div>
    </div>
  </div>
</template>

<script>
import { Cascader } from "element-ui";
import { req_area, req_stu_info } from "@/api/stuInfo.js";
import "@wangeditor/editor/dist/css/style.css";
import { Editor,Toolbar } from "@wangeditor/editor-for-vue";

export default {
    data() {
      return {
        form: {
          stu_id: "",
          stu_name: "",
          stu_sex: "男",
          stu_jg: "",
          stu_date: "",
          stu_hobby: "",
          stu_gbf: "",
          stu_head_img: "",
        },
        value:[],
        options:[],
        editor: null,
        html: "<p>hello</p>",
        toolbarConfig: {},
        editorConfig:{ placeholder:"请输入内容···"},
        mode:"default",
      };
  },
  async mounted(){
    let result = await req_area();
    console.log(result);
    this.options = result.data;
    console.log(this.$route.query);
    this.form.stu_head_img = this.$route.query.imgSrc;
    console.log(this.form);
  },
  methods: {
    goCamera(){
      this.$router.push({
        name: "cameraUpload",
      });
    },
    upLoad(){
      this.$refs.getInp.click();
      
      
    },
    getFile(){
      console.log("获取图片的函数");
      let that = this;
      console.dir(this.$refs.getInp.files[0]);
      let f = this.$refs.getInp.files[0];
      let fr = new FileReader();
      fr.readAsDataURL(f);
      fr.onload = function () {
        that.form.stu_head_img = fr.result;
      };
    },
    handleChange(value) {
      console.log(value);
      this.form.stu_jg = value.join("-");
      console.log(this.form.stu_jg);
    },
    async onSubmit() {
      console.log("这是提交");
      this.form.stu_hobby = this.editor.getText();
      console.log(this.form);
      let result = await req_stu_info(this.form);
      console.log(result);
      this.$message({
        message:"数据提交成功！！",
        type:"success",
        offset:130,
      });
    },
    goReset() {
      console.log("这是重置");
      this.$refs.form.resetFields();
    },
    onCreated(editor){
      this.editor = Object.seal(editor);
    },
  },
  components:{
    "el-cascader":Cascader,
    Editor,
    Toolbar,
  },
  beforeDestroy(){
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy();
  },
};
</script>

<style lang="less" scoped>
.stu_info_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  .stu_info {
    width: 800px;
    .stu_info_title{
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>